<template>
	<view class="control-layout" :style="{ bottom: systemInfo.safeAreaInsets.bottom > 0 ? systemInfo.safeAreaInsets.bottom + 10 + 'px' : '43.81rpx' }">
		<view class="control-item" @click="commentClick()">
			<image class="message"></image>
			<text>留言</text>
		</view>
		<view class="control-item" @click="offeringClick()">
			<image class="worship"></image>
			<text>祭奠</text>
		</view>
		<view class="control-item" @click="toIncense()">
			<image class="incense"></image>
			<text>上香</text>
		</view>
		<view class="control-item" @click="toHall()">
			<image class="hall"></image>
			<text>纪念馆</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {};
	},
	props: {
		hallId: {
			type: Number,
			default: 0
		}
	},
	computed: {
		...mapState({
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		/* 显示评论弹窗 */
		commentClick() {
			this.$emit('onCommentClick');
		},
		/* 显示祭奠弹窗 */
		offeringClick() {
			this.$emit('onOfferingClick');
		},
		/* 跳转上香页面 */
		toIncense() {
			if (!uni.getStorageSync('Authorization')) {
				uni.navigateTo({
					url: '/pages/auth/auth-user'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/common/incense?type=1&hallId=' + this.hallId
			});
		},
		/* 跳转纪念馆页面 */
		toHall() {
			uni.redirectTo({
				url: '/memorial/pages/detail/memorial-hall-detail?id=' + this.hallId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './control.scss';
</style>
